<template>
  <!-- 表格设置 -->
  <div>
    <span :class="state.open_pageSet ? 'listInfoBtn active' : 'listInfoBtn'" @click="pageSet">
      <svg-icon :class="state.open_pageSet ? 'active' : ''" class-name="search-icon" icon-class="shezhi" />
      表格设置
    </span>
    <div class="box" v-if="state.open_pageSet">
      <div class="w100 h100 set_box" :style="{height:props.height != 0?props.height+'px':''}">
        <div class="nav">
          <div class="item" :class="{click:state.activeNav == 0}" @click="clickNav(0)">字号行高</div>
          <div class="item" :class="{click:state.activeNav == 1}" @click="clickNav(1)">表格颜色</div>
          <div class="item" :class="{click:state.activeNav == 2}" @click="clickNav(2)">自动翻页</div>
          <div class="item" :class="{click:state.activeNav == 4}" @click="clickNav(4)">刷新设置</div>
          <div class="item" :class="{click:state.activeNav == 3}" @click="clickNav(3)">其他设置</div>
        </div>
        <div class="container">
          <div class="container_box" ref="container">
            <el-form :model="formData" label-width="auto" label-position="left">
              <el-row :gutter="20">
                <el-col :span="24">
                  <div class="title">字号行高</div>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="表格字号">
                    <el-select v-model="formData.tableSize" placeholder="请选择">
                      <el-option v-for="item in pageSets.fontSizes" :key="item.value" :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="表格行高">
                    <el-select v-model="formData.tableHeight" placeholder="请选择">
                      <el-option v-for="item in pageSets.rowHeight" :key="item.value" :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <div class="title">边框&颜色</div>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="表头背景">
                    <div class="color_switch">
                      <div class="color" :class="{
                          disableselect: !formData.tableHeadColorStatus,
                        }">
                        <el-color-picker ref="colorHeader" v-model="formData.tableHeadColorValue"
                           :teleported="false" :disabled="!formData.tableHeadColorStatus" show-alpha/>
                      </div>
                      <el-switch v-model="formData.tableHeadColorStatus" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="间隔条纹">
                    <div class="color_switch">
                      <div class="color"  :class="{
                          disableselect: !formData.intervalLineColorStatus,
                        }">
                        <el-color-picker ref="colorRow" v-model="formData.intervalLineColorValue"
                           :teleported="false" :disabled="!formData.intervalLineColorStatus"  show-alpha/>
                      </div>
                      <el-switch v-model="formData.intervalLineColorStatus" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="高亮行">
                    <div class="color_switch">
                      <div class="color" 
                        :class="{ disableselect: !formData.highlightRowStatus }">
                        <el-color-picker ref="colorVLine" v-model="formData.highlightRowValue"
                    
                          :teleported="false" :disabled="!formData.highlightRowStatus" show-alpha/>
                      </div>
                      <el-switch v-model="formData.highlightRowStatus" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="边框颜色">
                    <div class="color_switch">
                      <div class="color"
                        :class="{ disableselect: !formData.borderColorStatus }">
                        <el-color-picker ref="colorHLine" v-model="formData.borderColorValue"
                          :teleported="false" :disabled="!formData.borderColorStatus" show-alpha/>
                      </div>
                      <el-switch v-model="formData.borderColorStatus" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <div class="title">自动翻页</div>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="翻页间隔">
                    <span style="display: flex;">
                      <el-select v-model="formData.flipInterval" placeholder="请选择"
                        :disabled="!formData.autoPagerChrome">
                        <el-option v-for="item in pageSets.options" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <el-switch style="margin-left: 12px;" v-model="formData.autoPagerChrome" />
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <div class="title">刷新设置</div>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="刷新间隔">
                    <span style="display: flex;">
                      <el-select v-model="formData.timeInterval" placeholder="请选择" :disabled="!formData.refresh">
                        <el-option v-for="item in state.attainDataList" :key="item" :label="item" :value="item" />
                      </el-select>
                      <el-switch style="margin-left: 12px;" v-model="formData.refresh" />
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <div class="title">其他</div>
                </el-col>
                <el-col :span="24">
                  <vxe-table :data="tableheads" ref="xTable1" border="inner" :row-config="{ useKey: true }" :class="
                    storageSetting?.fontSize
                      ? 'tableFontSize2'
                      : 'tableFontSize'
                  " class="sortable-row-demo" max-height="288">
                    <vxe-column width="80">
                      <template #default>
                        <span class="drag-btn">
                          <el-icon>
                            <Rank />
                          </el-icon>
                        </span>
                      </template>
                      <template #header>
                        排序
                        <vxe-tooltip v-model="showHelpTip1" content="按住图标后可上下拖动排序！" enterable>
                          <i class="vxe-icon-question-circle-fill" @click="showHelpTip1 = !showHelpTip1"></i>
                        </vxe-tooltip>
                      </template>
                    </vxe-column>
                    <vxe-column title="列名" field="title"></vxe-column>
                    <vxe-column title="冻结列(最多四列)">
                      <template #default="{ row }">
                        <el-icon @click="fixedColumn(row,'left')" :color="row.fixed&&row.fixed == 'left'?'#4488ff':''">
                          <Back />
                        </el-icon>
                        <el-icon @click="fixedColumn(row,'right')"
                          :color="row.fixed&&row.fixed == 'right'?'#4488ff':''">
                          <Right />
                        </el-icon>
                      </template>
                    </vxe-column>
                    <vxe-column title="是否显示" field="show">
                      <template #default="{ row }">
                        <vxe-switch v-model="row.show" :close-value="0" :open-value="1" open-label="是" close-label="否">
                        </vxe-switch>
                      </template>
                    </vxe-column>
                  </vxe-table>
                </el-col>
                <el-col :span="24">
                  <div class="btns">
                    <el-button @click="getPageStyle">重置</el-button>
                    <div>
                      <el-button @click="state.open_pageSet = false,state.activeNav = 0">取消</el-button>
                      <el-button type="primary" style="background-color: #409eff; border: 1px solid #409eff"
                        @click="savePageStyle">保存</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import {
    computed,
    nextTick,
    onActivated,
    onMounted,
    onUnmounted,
    reactive,
    ref,
    watch,
    inject,
  } from "vue";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import axios from "@/utils/request";
  import {
    getattainDataList
  } from '@/api/config.js'
  import {
    useRouter
  } from "vue-router";
  import usePagesStore from "@/store/modules/pages";
  import {
    useStore
  } from "vuex";
  import Sortable from "sortablejs";

  const pagesStore = usePagesStore();
  const emit = defineEmits(['saveSet'])
  const props = defineProps({
    tableheads: {
      type: Array,
      default: () => {
        return [];
      },
    },
    height: {
      type: Number,
      default: 0
    },
    refreshShow: {
      type: Boolean,
      default: 1
    }
  });

  let container = ref();
  let state = reactive({
    open_pageSet: false,
    activeNav: 0,
    attainDataList: [],
    formDataPageStyle: {}
  });
  const tableheads = computed(() => {
    return props.tableheads
  })
  let pageSets = reactive({
    fontSizes: [{
        value: "12px",
        label: "12px",
      },
      {
        value: "14px",
        label: "14px",
      },
      {
        value: "16px",
        label: "16px",
      },
      {
        value: "18px",
        label: "18px",
      },
    ],
    options: [{
        value: "1s",
        label: "1s",
      },
      {
        value: "2s",
        label: "2s",
      },
      {
        value: "3s",
        label: "3s",
      },
      {
        value: "4s",
        label: "4s",
      },
    ],
    rowHeight: [{
        value: "24px",
        label: "24px",
      },
      {
        value: "32px",
        label: "32px",
      },
      {
        value: "40px",
        label: "40px",
      },
      {
        value: "44px",
        label: "44px",
      },
      {
        value: "48px",
        label: "48px",
      },
      {
        value: "56px",
        label: "56px",
      },
    ],
  });
  let colorHeader = ref();
  let colorRow = ref();
  let colorVLine = ref();
  let colorHLine = ref();
  const formData = ref({
    tableSize:'16px',
    tableHeight:'44px',
    tableHeadColorValue:'rgba(68, 136, 255, .12)',
    highlightRowValue:'rgba(91, 109, 128, 0.04)',
    borderColorValue:'rgba(91, 109, 128, 0)',
    intervalLineColorValue:'rgba(91, 109, 128, 0)'
  });

  // 打开表格设置弹窗
  const pageSet = () => {
    state.open_pageSet = !state.open_pageSet
    let initTime
    nextTick(() => {
      // 加载完成之后在绑定拖动事件
      initTime = setTimeout(() => {
        rowDrop()
      }, 500)
    })
  }
  let sortable1
  let xTable1 = ref();
  const rowDrop = () => {
    const $table = xTable1.value
    sortable1 = Sortable.create($table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
      handle: '.drag-btn',
      onEnd: (sortableEvent) => {
        const newIndex = sortableEvent.newIndex
        const oldIndex = sortableEvent.oldIndex
        const currRow = props.tableheads.splice(oldIndex, 1)[0]
        props.tableheads.splice(newIndex, 0, currRow)
      }
    })
  }

  // 冻结指定列
  const fixedColumn = (item, str) => {
    if (item.fixed && item.fixed == str) {
      item.fixed = null
    } else {
      item.fixed = str
    }
  }


// 获取指定页面列表样式
const getAllPageStyle = () => {
    axios
      .post("/page/edit/queryPageDetail", {
        mark: 'A',
      })
      .then((res) => {
        if (res.data.length > 0) {
          formData.value = res.data[0];
          pagesStore.onlyStyle = true
          pagesStore.pageStyle = res.data[0]
          emit('saveSet',res.data[0])
          pagesStore.settopbottomComPageStyle(formData.value)
        } else {
          formData.value;
          pagesStore.onlyStyle = false
        }
      });
  };
  // 获取指定页面列表样式
  const getPageStyle = () => {
    axios
      .post("/page/edit/queryPageDetail", {
        mark: tableheads.value[0].name,
      })
      .then((res) => {
        if (res.data.length > 0) {
          formData.value = res.data[0];
          pagesStore.onlyStyle = true
          pagesStore.pageStyle = res.data[0]
          emit('saveSet',res.data[0])
          saveLocal();
        } else {
          getAllPageStyle()
          formData.value;
          pagesStore.onlyStyle = false
          localStorage.removeItem("page-style");
        }
        pagesStore.settopbottomComPageStyle(formData.value)
      });
      axios.get('page/edit/attainDataList').then(res=>{
      state.attainDataList=res.data
    })
  };
  // 保存指定页面列表样式
  const savePageStyle = () => {
    if (formData.value.autoPagerChrome && formData.value.flipInterval == null) {
      ElMessage.warning('请选择翻页间隔')
    } else {
      formData.value.mark = props.tableheads[0].name;
      axios.post("/page/edit/update", formData.value).then((res) => {
        if ((res.code = 200)) {
          ElMessage.success("操作成功");
          state.open_pageSet = false;
          getPageStyle();
          state.activeNav = 0
        }
      });
    }
  };
  // 保存样式到本地
  const saveLocal = () => {
    document
      .querySelector(":root")
      .style.setProperty("--pageFont-size", formData.value.tableSize);
    document
      .querySelector(":root")
      .style.setProperty("--pageRow-height", formData.value.tableHeight);
    if (formData.borderColorStatus) {
      document
        .querySelector(":root")
        .style.setProperty("--vxe-table-border-color", formData.value.borderColorValue);
    } else {
      document
        .querySelector(":root")
        .style.setProperty("--vxe-table-border-color", '#e8eaec');
    }
    if (formData.value.tableHeadColorStatus) {
      document
        .querySelector(":root")
        .style.setProperty("--pageHeader-bg", formData.value.tableHeadColorValue);
    } else {
      document
        .querySelector(":root")
        .style.setProperty("--pageHeader-bg", '#E6EEFD');
    }
    if (formData.value.intervalLineColorStatus) {
      document
        .querySelector(":root")
        .style.setProperty(
          "--pageStripe-bg",
          formData.value.intervalLineColorValue
        );
      document
        .querySelector(":root")
        .style.setProperty(
          "--isStripe-bg",
          formData.value.intervalLineColorValue
        );
    } else {
      document
        .querySelector(":root")
        .style.setProperty(
          "--isStripe-bg",
          'rgba(91, 109, 128, 0.02)'
        );
      document
        .querySelector(":root")
        .style.setProperty(
          "--pageStripe-bg",
          'rgba(91, 109, 128, 0.02)'
        );
    }
    let pageStyle = {
      fontSize: formData.value.tableSize,
      rowHeight: formData.value.tableHeight,
      headerBg: formData.value.tableHeadColorValue,
      stripeBg: formData.value.intervalLineColorValue,
      isStripeBg: formData.value.intervalLineColorValue,
    };
    localStorage.setItem("page-style", JSON.stringify(pageStyle));
  };
  // 点击左侧导航
  const clickNav = (index) => {
    state.activeNav = index;
    if (index == 0) {
      container.value.style.transform = 'translateY(0)';
    } else if (index == 1) {
      container.value.style.transform = 'translateY(-82px)';
    } else if (index == 2) {
      container.value.style.transform = 'translateY(-216px)';
    } else if (index == 4) {
      container.value.style.transform = 'translateY(-300px)';
    } else if (index == 3) {
      container.value.style.transform = 'translateY(-380px)';
    }
  };
  onMounted(() => {
    setTimeout(() => {
      getPageStyle()
    }, 1);
    // getPageStyle() 
  })
  onUnmounted(() => {
    document
      .querySelector(":root")
      .style.setProperty("--pageHeader-bg", '#E6EEFD');
    localStorage.removeItem("page-style");
  })
</script>
<style lang="scss" scoped>
  :deep(.el-color-picker__mask) {
    display: none;

  }

  :deep(.el-form .el-form-item__label) {
    font-size: 16px;
    color: rgba(62, 70, 79, 0.8);
  }

  :deep(.el-color-picker) {
    width: 100%;
    border: none;
  }

  :deep(.el-color-picker__trigger) {
    width: 100%;
    border: none;
  }

  :deep(.el-color-picker__color) {
    border: none;
  }

  :deep(.el-color-picker__color-inner) {
    justify-content: end;
  }

  :deep(.el-color-picker .el-color-picker__icon) {
    color: rgba(62, 70, 79, 1);
    font-size: 16px;
    font-weight: bold;
    background-color: #f0f7ff;
    height: 100%;
    padding-left: 2px;
  }

  .click {
    cursor: pointer;
    color: #4488ff !important;
  }

  .el-button {
    margin: 0 0 0 12px;
    background-color: rgba(91, 109, 128, 0.08);
    border: none;

    .el-icon {
      margin: 0 2px 2px 0;
    }
  }

  .sortable-row-demo .drag-btn {
    cursor: move;
    // font-size: 16px;
  }

  .color_switch {
    display: flex;

    .color {
      margin-right: 12px;
      padding: 4px 0;
      width: 150px;
      height: 32px;
      background-color: #f0f7ff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;

      .color_box {
        width: 140px;
        height: 24px;
      }
    }

    .colorHeader {
      inset: 145px auto auto 25px !important;
    }

    .colorRow {
      inset: 145px auto auto 370px !important;
    }

    .colorVLine {
      inset: 185px auto auto 25px !important;
    }

    .colorHLine {
      inset: 185px auto auto 370px !important;
    }

    ::v-deep .color5 {
      inset: 330px auto auto 25px !important;
    }
  }

  // 表格设置
  .box {
    width: 744px;
    border-radius: 8px;
    // height: 800px;
    position: absolute;
    z-index: 99;
    right: 10px;
    background-color: #fff;
    box-shadow: -5px -3px 6px #ccc
  }

  .set_box {
    padding: 16px;
    height: 700px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    .nav {
      padding: 8px;
      width: 120px;
      height: 100%;
      background-color: #f7f7f8;
      border-radius: 4px;
      font-size: 16px;

      .item {
        margin-bottom: 8px;
        padding: 6px 12px;
        cursor: pointer;
        font-weight: 700;
        color: rgba(62, 70, 79, 1);
      }
    }

    .container {
      width: 576px;
      height: 100%;
      margin-top: 15px;
      overflow: hidden;

      .container_box {
        transition: transform 0.3s ease-in-out;
      }

      .title {
        font-weight: 700;
        color: rgba(62, 70, 79, 1);
        margin-bottom: 12px;
      }

      .btns {
        margin: 28px 0 0 0;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>